import React from 'react'
import { Card, Form, Select, Radio } from 'antd';
import axios from './../../axios'
import Utils from './../../utils/utils'
import './detail.less'

const FormItem = Form.Item
const Option = Select.Option
class Detail extends React.Component {
    state = {

    }
    //1.地图初始化
    renderMap =(result) => {
        // 创建地图实例
        this.map = new window.BMap.Map("orderDetailMap")
        // this.map.centerAndZoom('北京', 11);
        // 添加地图控件
        this.addMapContral();
        //绘制行驶路线 position_list里的数据 lon 经度 lat 纬度
        this.drawBikeRoute(result.position_list);
        //绘制服务区
        this.drawServiceArea(result.area)
    }
    //2.添加地图控件
    addMapContral = () => {
        let map = this.map;
        map.addControl(new window.BMap.ScaleControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}))
        map.addControl(new window.BMap.NavigationControl({anchor: window.BMAP_ANCHOR_TOP_RIGHT}))
    }
    //3. 绘制行驶路线图 positionList获取的时经度纬度坐标值
    drawBikeRoute = (positionList) => {
        let map = this.map;
        let startPoint = '';
        let endPoint = '';
        if(positionList.length > 0) {
            let first = positionList[0];  //获取positionList 的第一个元素
            let last = positionList[positionList.length - 1]
            startPoint = new window.BMap.Point(first.lon, first.lat);
            let startIcon = new window.BMap.Icon('/assets/start_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })

            let startMarker = new window.BMap.Marker(startPoint, {icon: startIcon })
            this.map.addOverlay(startMarker)
          

            // 结束标记
            endPoint = new window.BMap.Point(last.lon, last.lat);
            let endIcon = new window.BMap.Icon('/assets/end_point.png', new window.BMap.Size(36, 42), {
                imageSize: new window.BMap.Size(36, 42),
                anchor: new window.BMap.Size(18, 42)
            })
            let endMarker = new window.BMap.Marker(endPoint, {icon: endIcon })
            this.map.addOverlay(endMarker)


            //连接路线图
            let trackPoint = [];
            for(let i=0; i<positionList.length; i++) {
                let point = positionList[i]
                trackPoint.push(new window.BMap.Point(point.lon, point.lat));
            }

            let Polyline = new window.BMap.Polyline(trackPoint, {
                strokeColor: 'red',
                strokeWeight: 3,
                strokeOpacity: 1
            })
            // addOverlay(overlay: PanoramaLabel) 全景场景内添加覆盖物
            this.map.addOverlay(Polyline)
            this.map.centerAndZoom(endPoint, 11);

            
        }
      
    }


    componentDidMount() {
        // 动态获取路由id
        let orderId = this.props.match.params.orderId;
        if(orderId) {
            this.getDetailInfo(orderId)
        }

    }
    //获取订单详情数据
    getDetailInfo=(orderId)=> {
        axios.ajax({
            url: '/order/detail',
            data: {
                params: {
                    orderId: orderId
                }
            }
        }).then((res)=>{
            if(res.code == 0) {
                this.setState({
                    orderInfo: res.result
                })
                this.renderMap(res.result);
            }
            
        })
    }

    //绘制服务区
    drawServiceArea = (positionList) => {
        //连接路线图
        let trackPoint = [];
        for(let i=0; i<positionList.length; i++) {
            let point = positionList[i]
            trackPoint.push(new window.BMap.Point(point.lon, point.lat));
        }
        let polygon = new window.BMap.Polygon(trackPoint, {
            strokeColor:"blue",
            strokeWeight:2, 
            strokeOpacity:0.5,
            fillColor: '#ff8605'
        })
        this.map.addOverlay(polygon)
    }

   

    render() {
        const info = this.state.orderInfo || {};
        return (
            <div>
               <Card >
                   <div id="orderDetailMap" className="order-map"></div>
                   <div className="detail-items">
                        <div className="item-title">基础信息</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">用车模式</div>
                                <div className="detail-form-content">{info.mode = 1? '服务区': '禁停区'}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">订单编号</div>
                                <div className="detail-form-content">{info.order_sn} </div>
                            </li>
                            <li>
                                <div className="detail-form-left">车辆编号</div>
                                <div className="detail-form-content">{info.bike_sn}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">用户姓名</div>
                                <div className="detail-form-content">{info.user_name}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">手机号码</div>
                                <div className="detail-form-content">{info.mobile}</div>
                            </li>
                        </ul>
                   </div>
                   <div className="detail-items">
                        <div className="item-title">行驶轨迹</div>
                        <ul className="detail-form">
                            <li>
                                <div className="detail-form-left">行程起点</div>
                                <div className="detail-form-content">{info.start_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行程终点</div>
                                <div className="detail-form-content">{info.end_location}</div>
                            </li>
                            <li>
                                <div className="detail-form-left">行程里程</div>
                                <div className="detail-form-content">{info.distance /1000 + '公里'}</div>
                            </li>
                        </ul>
                   </div>
               </Card>
            </div>
        )
    }
}


export default Detail